<script lang="ts">
    import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
    import Scrollbar from '$lib/components/Basic/Scrollbar/Scrollbar.svelte';
    import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
    const code1 = `<script lang="ts">
    import Divider from '$lib/components/Basic/Divider/Divider.svelte';
<\/script>
<div class="example">
    <div class="example-group">
        <Scrollbar height="300px" scrollWidth={8}>
            <div class="horizontal-container">
                {#each Array.from({ length: 20 }) as _, i}
                    <div class="horizontal-bar">第 {i + 1} 项</div>
                {/each}
            </div>
        </Scrollbar>
    </div>
</div>
<\style scoped lang="scss">
.horizontal-container{
    display: flex;
    gap: 10px;
    flex-direction: column;
    padding: 0 2px;
}
.horizontal-bar{
    height: 40px;
    width: 100%;
    background-color: var(--color-primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--color-primary-500);
}
</style>`;
    const code2 = `<script lang="ts">
    import Divider from '$lib/components/Basic/Divider/Divider.svelte';
<\/script>
<div class="example">
    <div class="example-group">
        <Scrollbar height="80px" scrollWidth={8}>
            <div class="vertical-container">
                {#each Array.from({ length: 20 }) as _, i}
                    <div class="vertical-bar">第 {i + 1} 项</div>
                {/each}
            </div>
        </Scrollbar>
    </div>
</div>
<\style scoped lang="scss">
.vertical-container{
    display: flex;
    gap: 10px;
    padding: 0 2px;
}
.vertical-bar{
    height: 40px;
    width: 80px;
    background-color: var(--color-error-100);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    color: var(--color-error-500);
}
</style>`;
const attributesData = [
		{ id: 1, name: 'height', describe: '属性设置，滚动条容器高度，若不设置则根据父容器高度自适应', type: 'number | string', defaulValue: '100%' },
		{ id: 2, name: 'scrollWidth', describe: '滚动条宽度', type: 'number', defaulValue: '6' },
		{ id: 3, name: 'scrollPadding', describe: 'scrollPadding 为滚动条与父容器之间的距离，其中 scrollWidth + scrollPadding 为内容部分与父容器之间的距离', type: 'number', defaulValue: '2' },
        { id: 4, name: 'innerPadding', describe: 'innerPadding 为内容部分与父容器之间的内边距，写法与 padding 相同', type: 'string', defaulValue: '' },
	];
const eventsData = [
    { id: 1, name: 'onScroll', describe: '滚动条事件回调', type: '(e: MouseEvent) => void' },
    { id: 2, name: 'onScrollPositionChange', describe: '滚动位置变化事件回调', type: '({ scrollLeft: number, scrollTop: number }) => void' },
];
</script>
<div class="component-container">
	<div class="title">
		<div class="name">Scrollbar 滚动条</div>
		<div class="describe">修改原生滚动条的样式，通过鼠标hover来控制显示和隐藏的效果。</div>
	</div>
	<div class="subtitle">
		<div class="name">竖向滚动条</div>
		<div class="describe">
			通过&nbsp;&nbsp;<span class="tag">height</span>&nbsp;&nbsp;属性设置滚动条容器高度，若不设置则根据父容器高度自适应
		</div>
    </div>
    <ComponentPreview code={code1}>
        <div class="example">
            <div class="example-group">
                <Scrollbar height="300px" scrollWidth={8}>
                    <div class="horizontal-container">
                        {#each Array.from({ length: 20 }) as _, i}
                            <div class="horizontal-bar">第 {i + 1} 项</div>
                        {/each}
                    </div>
                </Scrollbar>
            </div>
        </div>
    </ComponentPreview>
    <div class="subtitle">
		<div class="name">横向滚动条</div>
		<div class="describe">
			当元素宽度大于容器宽度时，会显示横向滚动条。
		</div>
    </div>
    <ComponentPreview code={code1}>
        <div class="example">
            <div class="example-group">
                <Scrollbar height="80px" scrollWidth={8}>
                    <div class="vertical-container">
                        {#each Array.from({ length: 20 }) as _, i}
                            <div class="vertical-bar">第 {i + 1} 项</div>
                        {/each}
                    </div>
                </Scrollbar>
            </div>
        </div>
    </ComponentPreview>
    <div class="subtitle">
		<div class="name">Scrollbar Attributes</div>
	</div>
    <Table data={attributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
                    {#if Array.isArray(scope.row.type)}
                    <span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
                        {#each scope.row.type as item}
                            <span class="tag">{item}</span>
                        {/each}
                    </span>
                    {:else}
                        <span>{scope.row.type}</span>
                    {/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>
    <div class="subtitle">
		<div class="name">Scrollbar Events</div>
	</div>
    <Table data={eventsData} border={false} size="lg">
		<TableColumn key="name" title="事件名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}></TableColumn>
	</Table>
</div>
<style scoped lang="scss">
    .horizontal-container{
        display: flex;
        gap: 10px;
        flex-direction: column;
        padding: 0 2px;
    }
    .horizontal-bar{
        height: 40px;
        width: 100%;
        background-color: var(--color-primary-100);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        color: var(--color-primary-500);
    }
    .vertical-container{
        display: flex;
        gap: 10px;
        padding: 0 2px;
    }
    .vertical-bar{
        height: 40px;
        width: 80px;
        background-color: var(--color-error-100);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        flex-shrink: 0;
        color: var(--color-error-500);
    }
</style>